/**
 * Created by hao.cheng on 2017/4/16.
 */
import React from 'react';
import { Button } from 'antd';
// import { PwaInstaller } from '../widget';
import { connectAlita } from 'redux-alita';
import { RouteComponentProps } from 'react-router';
import { FormProps } from 'antd/lib/form';
import umbrella from 'umbrella-storage';

// const FormItem = Form.Item;
type LoginProps = {
    setAlitaState: (param: any) => void;
    auth: any;
} & RouteComponentProps &
    FormProps;
class Login extends React.Component<LoginProps> {
    componentDidMount() {
        const { setAlitaState } = this.props;
        setAlitaState({ stateName: 'auth', data: null });
    }
    componentDidUpdate(prevProps: LoginProps) {
        // React 16.3+弃用componentWillReceiveProps
        const { auth: nextAuth = {}, history } = this.props;
        // const { history } = this.props;
        if (nextAuth.data && nextAuth.data.uid) {
            // 判断是否登陆
            umbrella.setLocalStorage('user', nextAuth.data);
            history.push('/');
        }
    }
    handleSubmit = (e: React.FormEvent) => {
        // e.preventDefault();
        // this.props.form!.validateFields((err, values) => {
        //     if (!err) {
        //         console.log('Received values of form: ', values);
        //         const { setAlitaState } = this.props;
        //         if (values.userName === 'admin' && values.password === 'admin')
        //             setAlitaState({ funcName: 'admin', stateName: 'auth' });
        //         if (values.userName === 'guest' && values.password === 'guest')
        //             setAlitaState({ funcName: 'guest', stateName: 'auth' });
        //     }
        // });
        const { setAlitaState } = this.props;
        setAlitaState({ funcName: 'admin', stateName: 'auth' });
    };
    gitHub = () => {
        window.location.href =
            'https://github.com/login/oauth/authorize?client_id=792cdcd244e98dcd2dee&redirect_uri=http://localhost:3006/&scope=user&state=reactAdmin';
    };
    render() {
        // const { getFieldDecorator } = this.props.form!;
        // return (
        //     <div className="login">
        //         <div className="login-form">
        //             <div className="login-logo">
        //                 <span>React Admin</span>
        //                 <PwaInstaller />
        //             </div>
        //             <Form onSubmit={this.handleSubmit} style={{ maxWidth: '300px' }}>
        //                 <FormItem>
        //                     {getFieldDecorator('userName', {
        //                         rules: [{ required: true, message: '请输入用户名!' }],
        //                     })(
        //                         <Input
        //                             prefix={<Icon type="user" style={{ fontSize: 13 }} />}
        //                             placeholder="管理员输入admin, 游客输入guest"
        //                         />
        //                     )}
        //                 </FormItem>
        //                 <FormItem>
        //                     {getFieldDecorator('password', {
        //                         rules: [{ required: true, message: '请输入密码!' }],
        //                     })(
        //                         <Input
        //                             prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
        //                             type="password"
        //                             placeholder="管理员输入admin, 游客输入guest"
        //                         />
        //                     )}
        //                 </FormItem>
        //                 <FormItem>
        //                     {getFieldDecorator('remember', {
        //                         valuePropName: 'checked',
        //                         initialValue: true,
        //                     })(<Checkbox>记住我</Checkbox>)}
        //                     <span className="login-form-forgot" style={{ float: 'right' }}>
        //                         忘记密码
        //                     </span>
        //                     <Button
        //                         type="primary"
        //                         htmlType="submit"
        //                         className="login-form-button"
        //                         style={{ width: '100%' }}
        //                     >
        //                         登录
        //                     </Button>
        //                     <p style={{ display: 'flex', justifyContent: 'space-between' }}>
        //                         <span>或 现在就去注册!</span>
        //                         <span onClick={this.gitHub}>
        //                             <Icon type="github" />
        //                             (第三方登录)
        //                         </span>
        //                     </p>
        //                 </FormItem>
        //             </Form>
        //         </div>
        //     </div>
        return (
            <div
                style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    height: '100%',
                }}
            >
                <Button type="primary" onClick={this.handleSubmit}>
                    点击登录
                </Button>
            </div>
        );
    }
}

export default connectAlita(['auth'])(Login);
